import React, { CSSProperties } from 'react'
import CommonNav from '../../components/CommonNav/CommonNav'
import {inject,observer} from 'mobx-react'
import UserStore from '../../store/modules/userStore'
import EmptyCart from './EmptyCart/EmptyCart'
import CartList from './CartList/CartList'
import Scroll from '../../components/Scroll/Scroll'
import CartStore from "../../store/modules/cartStore";
import CheckFooter from "./CheckFoot/CheckFooter";

const CartStyle: CSSProperties = {
    backgroundColor: 'rgb(247,247,247)',
    minHeight: '100vh',
    position: 'relative'
}
const scrollStyle: CSSProperties = {
    position: 'absolute',
    top: '9vh',
    left: 0,
    right: 0,
    bottom: '56px',
    overflow: "hidden"
}
interface IProps {
    userStore?: UserStore;
    cartStore?: CartStore
}
const Cart = (props: IProps) => {
    //获取滚动组件方法
    const scroll = React.useRef()
    //触顶刷新操作
    //触底

    React.useEffect(() => {

        PubSub.subscribe('onTop',(_,data) => {
            props.cartStore?.getUserCart();
            (scroll.current as any).endPullDown()
        })

        return () => {
            //组件取消挂载移出所有监听
            PubSub.clearAllSubscriptions()
        }
    }, [ ]) // eslint-disable-line react-hooks/exhaustive-deps

    return (
        <div style={CartStyle}>
            <CommonNav isBack={true} text='购物车' />
            <Scroll style={scrollStyle} ref={scroll} content={
                !props.userStore?.isLogin ? <EmptyCart info='您还未登录' action='去登录' link='/login' img="/assets/picsrc/empty.svg"/> : <CartList />
            } />
            <CheckFooter />
        </div>
    )
}

export default inject('userStore','cartStore')(observer(Cart))